<template>
  <div class="table-form-box">
    <el-form class="form-box" :model="modelData" :ref="formRef" :rules="rules">
      <!--
        枚举所有表单
        兼容多行文本类型样式宽度 -->

      <el-form-item
        v-for="(item, index) in formData"
        :key="(item.name ? item.name : item.label) + '-' + index"
        :class="getFormItemClass(item)"
      >
        <!-- 文本框 -->
        <el-form-item
          :label="item.label"
          :prop="item.name"
          v-if="item.type === 'input'"
        >
          <el-input
            style="100%"
            :size="item.size || 'small'"
            :placeholder="item.placeholder || ''"
            :clearable="item.clearable || true"
            :maxlength="item.maxlength"
            :minlength="item.minlength"
            :disabled="item.disabled"
            v-model.trim="modelData[item.name]"
          ></el-input>
        </el-form-item>

        <!-- 多行文本 -->
        <el-form-item
          :label="item.label"
          :prop="item.name"
          v-else-if="item.type === 'textarea'"
        >
          <el-input
            class="el-textarea-inner"
            :rows="item.rows"
            :clearable="item.clearable || true"
            :placeholder="item.placeholder || ''"
            :size="item.size || 'small'"
            :maxlength="item.maxlength"
            type="textarea"
            :disabled="item.disabled"
            v-model="modelData[item.name]"
          />
        </el-form-item>

        <!-- 普通选择器，可增加级联选择器 -->
        <el-form-item
          :label="item.label"
          :prop="item.name"
          v-else-if="item.type === 'select'"
        >
          <el-select
            v-model="modelData[item.name]"
            :clearable="item.clearable || true"
            :placeholder="item.placeholder || ''"
            :size="item.size || 'small'"
            :disabled="item.disabled"
            :filterable="item.filterable"
            :remote="item.remote"
            :remote-method="item.remoteMethod"
            :multiple="item.multiple"
          >
            <el-option
              v-for="op in item.data"
              :key="op.dictValue"
              :label="op.dictKey"
              :value="op.dictValue"
              :style="`color:${op.dictColor}`"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 日期选择器 -->
        <el-form-item
          :label="item.label"
          :prop="item.name"
          v-else-if="item.type === 'date'"
        >
          <el-date-picker
            v-model="modelData[item.name]"
            :size="item.size || 'small'"
            :style="item.style || 'width:100%;'"
            :type="item.dateType || 'date' || 'datetime' || 'daterange'"
            :placeholder="item.placeholder || ''"
            :range-separator="item.rangeSeparator || '至'"
            :start-placeholder="item.startPlaceholder || '开始日期'"
            :end-placeholder="item.endPlaceholder || '结束日期'"
            :disabled="item.disabled"
            :format="item.format || 'yyyy-MM-dd'"
            :value-format="item.valueFormat || 'yyyy-MM-dd'"
            :pickerOptions="item.pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 日期时间选择器 -->
        <el-form-item
          :label="item.label"
          :prop="item.name"
          v-else-if="item.type === 'dateTime'"
        >
          <el-date-picker
            v-model="modelData[item.name]"
            :size="item.size || 'small'"
            :style="item.style || 'width:100%;'"
            :type="item.dateType || 'datetimerange'"
            :default-time="item.defaultTime"
            :placeholder="item.placeholder || ''"
            :disabled="item.disabled"
            :format="item.format || 'yyyy-MM-dd HH:mm:ss'"
            :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
          >
          </el-date-picker>
        </el-form-item>

        <AddressChoose
          v-else-if="item.type === 'address'"
          ref="mychild"
          :isRequire="false"
          :desc="item.label"
          :name="item.name"
          :placeholder="item.placeholder"
          :checkStrictly="item.checkStrictly"
          :leaf="item.leaf ? item.leaf : 3"
          @chooseAddress="chooseAddress"
        />

        <div v-else-if="item.type === 'slot'">
          <slot :name="item.name" :item="item"></slot>
        </div>
      </el-form-item>

      <el-collapse-transition v-if="collapseFormData.length">
        <!-- -->
        <div class="form-box collapse-box" v-show="queryCont">
          <el-form-item
            v-for="(item, index) in collapseFormData"
            :key="(item.name ? item.name : item.label) + '-' + index"
            :class="getFormItemClass(item)"
          >
            <!-- 文本框 -->
            <el-form-item
              :label="item.label"
              :prop="item.name"
              v-if="item.type === 'input'"
            >
              <el-input
                style="100%"
                :size="item.size || 'small'"
                :placeholder="item.placeholder || ''"
                :clearable="item.clearable || true"
                :maxlength="item.maxlength"
                :minlength="item.minlength"
                :disabled="item.disabled"
                v-model.trim="modelData[item.name]"
              ></el-input>
            </el-form-item>

            <!-- 多行文本 -->
            <el-form-item
              :label="item.label"
              :prop="item.name"
              v-else-if="item.type === 'textarea'"
            >
              <el-input
                class="el-textarea-inner"
                :rows="item.rows"
                :clearable="item.clearable || true"
                :placeholder="item.placeholder || ''"
                :size="item.size || 'small'"
                :maxlength="item.maxlength"
                type="textarea"
                :disabled="item.disabled"
                v-model="modelData[item.name]"
              />
            </el-form-item>

            <!-- 普通选择器，可增加级联选择器 -->
            <el-form-item
              :label="item.label"
              :prop="item.name"
              v-else-if="item.type === 'select'"
            >
              <el-select
                v-model="modelData[item.name]"
                :clearable="item.clearable || true"
                :placeholder="item.placeholder || ''"
                :size="item.size || 'small'"
                :disabled="item.disabled"
                :filterable="item.filterable"
                :remote="item.remote"
                :remote-method="item.remoteMethod"
                :multiple="item.multiple"
              >
                <el-option
                  v-for="op in item.data"
                  :key="op.dictValue"
                  :label="op.dictKey"
                  :value="op.dictValue"
                  :style="`color:${op.dictColor}`"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 日期选择器 -->
            <el-form-item
              :label="item.label"
              :prop="item.name"
              v-else-if="item.type === 'date'"
            >
              <el-date-picker
                v-model="modelData[item.name]"
                :size="item.size || 'small'"
                :style="item.style || 'width:100%;'"
                :type="item.dateType || 'date' || 'datetime' || 'daterange'"
                :placeholder="item.placeholder || ''"
                :range-separator="item.rangeSeparator || '至'"
                :start-placeholder="item.startPlaceholder || '开始日期'"
                :end-placeholder="item.endPlaceholder || '结束日期'"
                :disabled="item.disabled"
                :format="item.format || 'yyyy-MM-dd'"
                :value-format="item.valueFormat || 'yyyy-MM-dd'"
                :pickerOptions="item.pickerOptions"
              >
              </el-date-picker>
            </el-form-item>

            <!-- 日期时间选择器 -->
            <el-form-item
              :label="item.label"
              :prop="item.name"
              v-else-if="item.type === 'dateTime'"
            >
              <el-date-picker
                v-model="modelData[item.name]"
                :size="item.size || 'small'"
                :style="item.style || 'width:100%;'"
                :type="item.dateType || 'datetimerange'"
                :default-time="item.defaultTime"
                :placeholder="item.placeholder || ''"
                :disabled="item.disabled"
                :format="item.format || 'yyyy-MM-dd HH:mm:ss'"
                :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
              >
              </el-date-picker>
            </el-form-item>

            <AddressChoose
              v-else-if="item.type === 'address'"
              ref="mychild"
              :isRequire="false"
              :desc="item.label"
              :name="item.name"
              :placeholder="item.placeholder"
              :checkStrictly="item.checkStrictly"
              :leaf="item.leaf ? item.leaf : 3"
              @chooseAddress="chooseAddress"
            />

            <div v-else-if="item.type === 'slot'">
              <slot :name="item.name" :item="item"></slot>
            </div>
          </el-form-item>
        </div>
      </el-collapse-transition>
    </el-form>
    <div
      v-if="collapseFormData.length"
      class="open_close"
      @click="queryCont = !queryCont"
    >
      <div v-if="!queryCont" class="el-icon-arrow-down"></div>
      <div v-else class="el-icon-arrow-up"></div>
    </div>
    <!-- 按钮，可增加导出、导入、创建、审核等按钮类型，也可修改成传入数组配置类型 -->
    <div v-if="btnsabled" class="form-btns">
      <el-button
        size="small"
        round
        v-if="resetabled"
        @click="onReset"
        class="reset-button"
        >{{ resetText }}</el-button
      >
      <el-button
        size="small"
        round
        v-if="okabled"
        @click="onSearch"
        type="primary"
        class="query-button"
        >{{ okText }}</el-button
      >
    </div>
  </div>
</template>

<script src="./index.js"></script>
<style scoped lang="scss" src="./index.scss"></style>
